<script setup>
import { ref } from "vue"

// 按照列表渲染
const originList = ref([1, 2, 3, 4])

const handleDragStart = (event, index) => {
    event.dataTransfer.setData("text/plain", index)
}
const handleDragOver = (event) => {
    event.preventDefault()
}
const handleDrop = (event, targetIndex) => {
    event.preventDefault()
    const originIndex = parseInt(event.dataTransfer.getData("text/plain"))
    // drop 时改变顺序
    const item = originList.value.splice(originIndex, 1)[0]
    originList.value.splice(targetIndex, 0, item)
}
</script>
<template>
    <div class="block" draggable="true" v-for="(item, key) in originList" :key="key"
        @dragstart="handleDragStart($event, key)" @dragover="handleDragOver" @drop="handleDrop($event, key)">
        {{ item }}
    </div>
</template>

<style scoped>
.block {
    height: 50px;
    line-height: 50px;
    background-color: gray;
    color: white;
    margin-bottom: 1em;
}
</style>
